<!--
 * @Author: baoyiwen 511530203@qq.com
 * @Date: 2025-04-22 15:28:50
 * @LastEditors: baoyiwen 511530203@qq.com
 * @LastEditTime: 2025-05-13 16:26:32
 * @FilePath: \neilao-mobile\src\views\login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="loginContent">
    <div class="loginTitle">{{ title }}</div>
    <div class="loginForm">
      <van-form @submit="onSubmit">
        <van-grid>
          <div class="title">欢迎登录</div>
          <van-field
            v-model="fromData.account"
            label="账号"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="fromData.password"
            label="密码"
            type="password"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="fromData.validCode"
            placeholder="请输入验证码"
            label="验证码"
            :rules="[{ required: true, message: '请输入验证码' }]"
          >
            <template #button>
              <div
                class="base-image"
                style="width: 120px; height: 100%"
                @click="getPicCaptchaCode"
              >
                <img :src="imageURL" alt="" style="width: 100%; height: 100%" />
              </div>
              <!-- <van-button size="small" type="primary">发送验证码</van-button> -->
            </template>
          </van-field>
          <van-button
            type="primary"
            size="large"
            @click="loginNow"
            native-type="submit"
          >
            立即登录
          </van-button>
        </van-grid>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, toRaw, nextTick } from "vue";
import { useRouter } from "vue-router";
import {
  getPicCaptcha,
  doLogin,
  getUserInfo,
  getDataToken,
} from "../api/index";
import { showSuccessToast, showFailToast } from "vant";
import { setToken, setUserInfo, setDataToken, clearDataToken, clearToken,clearUserInfo } from "../utils/userInfo";
const router = useRouter();
const title = APPENV.VITE_APP_TITLE
const fromData = reactive({
  validCode: "",
  validCodeReqNo: "",
  account: "",
  password: "",
  device: "APP",
});
const imageURL = ref("");
const loginNow = () => {
  router.push({});
};
const getPicCaptchaCode = () => {
  getPicCaptcha().then((res) => {
    if (res.data.code === 200) {
      fromData.validCodeReqNo = res.data.data.validCodeReqNo;
      imageURL.value = res.data.data.validCodeBase64;
    }
  });
};
onMounted(() => {
  getPicCaptchaCode();
});

const clearAllUserInfo = () => {
  clearDataToken();
  clearToken();
  clearUserInfo();
}
const onSubmit = () => {
  // router.push("/home");
  doLogin(fromData)
    .then((res) => {
      if (res.data.code === 200) {
        showSuccessToast("登陆成功!");
        setToken(res.data.data);
        getDataToken(res.data.data).then((res) => {
          if (res.data.code === 200) {
            setDataToken(res.data.message);
          } else {
            clearAllUserInfo();
            // showFailToast();
          }
        }).catch((err) => {
          clearAllUserInfo();
          showFailToast(err.message);
        });
        getUserInfo(res.data.data).then((res) => {
          if (res.data.code === 200) {
            setUserInfo(res.data.data);

            // 需要延迟，不然pc登录的时候页面跳转不成功
            setTimeout(() => {
              router.push("/workStation");
            }, 150)
          } else {
            clearAllUserInfo();
            // showFailToast();
          }
        }).catch((err) => {
          clearAllUserInfo();
          showFailToast(err.message);
        });
      } else {
        showFailToast(res.data.message);
      }
    })
    .catch((err) => {
      showFailToast(err.message);
    })
    .finally(() => {
      getPicCaptchaCode();
    });
};
</script>

<style scoped lang="less">
.loginContent {
  height: 100%;
  background: #f7f8f7;
  padding-top: 20%;
  text-align: center;
  .loginTitle {
    font-size: 24px;
  }
  .loginForm {
    margin-top: 30px;
    .title {
      width: 100%;
      text-align: center;
      padding: 10px;
    }
  }
}
.van-grid {
  padding: 10px;
  text-align: center;
  background: #fff;
}
.base-image {
  height: 80%;
  width: 120px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
